<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表页</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1886514_2ffcra6b80c.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background: #ffffff;
    }

    a {
      text-decoration: none;
    }

    input {
      outline: none;
    }

    .wangto-con,
    .sort-con,
    .list-con {
      width: 1349px;
      margin: 0 auto;
    }

    .wangto-con {
      padding-top: 1px;
      height: 40px;
      border: 1px solid #e9e9e9;
      background: #f5f5f5;
    }

    .wangto-con p {
      margin: 13px 0 0 19px;
      height: 14px;
      line-height: 14px;
    }

    .wangto-con p span {
      float: left;
      font-size: 12px;
      color: #747474;
    }

    .wangto-con p a {
      float: left;
      padding: 0 14px 0 12px;
      color: #333333;
      font-size: 12px;
      border-right: 1px solid #666666;
    }

    .wangto-con p a:hover {
      color: red;
    }

    /* 排序区域 */
    .sort-con {
      margin: 10px auto;
      height: 38px;
      line-height: 40px;
      border: 1px solid #e8e8e8;
      background: yellow;
      clear: both;
    }

    .sort-l {
      float: left;
      /* width: 235px; */
      height: 40px;
      line-height: 40px;
    }

    .sort-l span {
      float: left;
      margin: 0 12px 0 10px;
      font-size: 12px;
      color: #747474;
    }

    .sort-l input {
      height: 22px;
      width: 46px;
      border: 1px solid #cccccc;
    }

    .ensure {
      /* display: none; */
      width: 44px;
      height: 24px;
      background: #ff4200;
    }

    .sort-l select {
      outline: none;
      height: 22px;
      width: 61px;
      border: 1px solid #cccccc;
      font-size: 12px;
      color: #747474;
    }


    .sort-r {
      float: right;
      height: 38px;
      border-left: 1px solid #ccc;
      background: pink;
    }

    .sort-r input {
      width: 12px;
      height: 12px;
      margin-right: 5px;
    }

    .sort-r input:nth-child(1) {
      margin-left: 28px;
    }

    .sort-r label {
      margin-right: 20px;
      font-size: 11px;
      color: #333333;
    }

    .list-con {
      min-height: 388px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      background: orange;
      clear: both;
    }

    .list-item {
      float: left;
      margin: 9px 22px 11px 0;
      height: 366px;
      width: 250px;
      border: 1px solid #eeeeee;
      background: yellowgreen;
    }

    .list-item .active {
      border-color: #f85300;
    }

    .list-item:nth-child(5n) {
      margin-right: 0;
    }

    .list-img {
      margin: 15px 15px 19px 15px;
      display: block;
      width: 220px;
      height: 220px;
    }

    .list-item p {
      margin: 10px;
      height: 14px;
      font-size: 12px;
      line-height: 14px;
    }

    .price-box {
      color: #ff4400;
    }

    .price-box .package {
      margin-left: 5px;
      display: inline-block;
      width: 27px;
      height: 14px;
      background: #f85300;
      color: #fff;
      text-align: center;
    }

    .title-box {
      color: #000000;
    }

    .shop-box {
      clear: both;
    }

    .shop-box .shop {
      float: left;
    }

    .shop-box .pay-box {
      float: right;
    }

    .describe-box {
      clear: both;
      height: 16px;
      line-height: 16px;
    }

    .describe-box .gold {
      float: left;
      width: 16px;
      height: 16px;
    }

    .describe-box .describe {
      padding: 0 3px;
      float: right;
      width: 97px;
      height: 14px;
      border: 1px solid #ccc;
      color: #808080;
    }

    .describe .sanjiao {
      float: right;
      font-size: 12px;
      color: #6d6d6d;
    }
  </style>
</head>

<body>

  <!-- 你需要寻找？ -->
  <div class="wangto-con">
    <p>
      <span>您是不是想要找：</span> <a href="###">女夏装</a><a href="###">女套装</a>
    </p>
  </div>
  <!-- 排序区域 -->
  <div class="sort-con">
    <div class="sort-l">

      <span class="price">价格：</span>
      <input type="text" class="minPrice">
      -
      <input type="text" class="maxPrice">
      <!-- <button class="ensure">确定</button> -->
      <select name="" id="">
        <option value="发源地">发源地</option>
        <option value="北京">北京</option>
      </select>
    </div>
    <div class="sort-r">
      <input type="checkbox"><label for="">包邮</label>
      <input type="checkbox"><label for="">正品保障</label>
      <input type="checkbox"><label for="">7天退换</label>
      <input type="checkbox"><label for="">消费者保障</label>
    </div>
  </div>
  <!-- 列表页 -->
  <div class="list-con">
    <!-- <div class="list-item">
      <img class="list-img" src="../images/003.jpg" alt="">
      <p class="price-box">
        ￥<span class="price">228.00</span><span class="package">包邮</span>
      </p>
      <p class="title-box"><a href="###">SP同款春夏短袖蕾丝性感露肩连衣裙小白</a></p>
      <p class="shop-box">
        <span class="shop">江米团猫</span>
        <span class="pay-box"><span class="pay">477</span>付款</span>
      </p>
      <p class="describe-box">
        <img class="gold" src="../images/gold1_03.jpg" alt="">
        <span class="describe">
          如实描述：<span class="grand">4.8</span><i class="iconfont icon-xia sanjiao"></i>
        </span>
      </p>
    </div>-->
  </div>


  <script>
    var data = [{
      id: 1,
      imgUrl: '../images/001_03.jpg',
      price: 166.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白",
      shop: "江米团猫",
      pay: "477",
      gold: "../images/gold1_03.jpg",
      grand: "4.8"
    }, {
      id: 2,
      imgUrl: '../images/002_03.jpg',
      price: 1996.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白2",
      shop: "江米团猫",
      pay: "555",
      gold: "../images/gold1_03.jpg",
      grand: "4.9"
    }, {
      id: 3,
      imgUrl: '../images/003.jpg',
      price: 1996.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白2",
      shop: "江米团猫",
      pay: "555",
      gold: "../images/gold1_03.jpg",
      grand: "4.9"
    }, {
      id: 4,
      imgUrl: '../images/004_03.jpg',
      price: 1996.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白2",
      shop: "江米团猫",
      pay: "555",
      gold: "../images/gold1_03.jpg",
      grand: "4.9"
    }, {
      id: 5,
      imgUrl: '../images/005_03.jpg',
      price: 296.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白2",
      shop: "江米团猫",
      pay: "535",
      gold: "../images/gold1_03.jpg",
      grand: "4.7"
    }]

    let list_con = document.querySelector(".list-con")
    render(data)

    let list_items = list_con.querySelectorAll(".list-item")

    //点击列表页 把点击的所在item的id传递到详情页 
    for (var i = 0; i < list_items.length; i++) {
      list_items[i].index = i; //使用index属性来 为 list_items中的每一项设置索引号
      list_items[i].onclick = function () {
        // console.log(this);
        // var ids = this.getAttribute("idx")
        open("./00详情页.html?id=" + this.getAttribute("idx"))
      }
    }

    //渲染数据的函数
    function render(data) {
      data.forEach(function (item, i) {
        list_con.innerHTML += `
        <div class="list-item" idx="${item.id}">
      <img class="list-img"  src="${item.imgUrl}" alt="">
      <p class="price-box">
        ￥<span class="price">${item.price}</span>
         <span class="package">${item.package}</span>
      </p>
      <p class="title-box"><a href="###">${item.title}</a></p>
      <p class="shop-box">
        <span class="shop">${item.shop}</span>
        <span class="pay-box"><span class="pay">${item.pay}</span>付款</span>
      </p>
      <p class="describe-box">
        <img class="gold" src="${item.gold}" alt="">
        <span class="describe">
          如实描述：<span class="grand">${item.grand}</span><i class="iconfont icon-xia sanjiao"></i>
        </span>
      </p>
    </div>
        `
      })
    }
  </script>
</body>

</html>